<template>
	<view class="">
		<view class="" style="text-align: left;padding-left: 15px;font-size: 16px;color: #333;margin: 5px 0;" v-if="title">
			<text style="display:block;float:left;height:14px;width:3px;background:#0081f0;margin-top: 4px;margin-right: 3px;"></text>
			{{ title }}
		</view>
		<canvas
			v-if="canvasId"
			:id="canvasId"
			:canvasId="canvasId"
			:style="{
				background: bg,
				width: cWidth * pixelRatio + 'px',
				height: cHeight * pixelRatio + 'px',
				transform: 'scale(' + 1 / pixelRatio + ')',
				'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
				'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
			}"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			@error="error"
		></canvas>
	</view>
</template>

<script>
import uCharts from './u-charts.js';
var canvases = {};

export default {
	props: {
		chartType: {
			required: true,
			type: String,
			default: 'column'
		},
		bg: {
			type: String,
			default: '#fff'
		},
		title: {
			type: String,
			default: ''
		},
		opts: {
			required: true,
			type: Object,
			default() {
				return { categories: [], series: [] };
			}
		},
		canvasId: {
			type: String,
			default: 'u-canvas'
		},
		cWidth: {
			default: 375
		},
		cHeight: {
			default: 280
		},
		pixelRatio: {
			type: Number,
			default: 1
		}
	},
	mounted() {
		console.log(this.opts)
		this.init();
	},
	methods: {
		init() {
			switch (this.chartType) {
				case 'column':
					this.initColumnChart();
					break;
				case 'line':
					this.initLineChart();
					break;
				case 'area':
					this.initAreaChart();
					break;
				case 'radar':
					this.initRadChart();
					break;
				default:
					break;
			}
		},
		initColumnChart() {
			// console.log(this.opts.series[0].data.length)
			var _this = this;
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'column',
				padding: [15, 15, 0, 15],
				legend: {
					show: true,
					padding: 5,
					lineHeight: 11,
					margin: 0
				},
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: this.pixelRatio,
				animation: false,
				categories: this.opts.categories,
				series: this.opts.series,
				enableScroll: true,
				xAxis: {
					disableGrid: false,
					itemCount: 6,
					scrollShow: this.opts.series.length?this.opts.series[0].data.length > 6 ? true : false:false,
					scrollBackgroundColor: 'red',
					scrollColor: 'blue'
				},
				yAxis: {
					// format:(val)=>{return val.toFixed(0)+'元'}
				},
				dataLabel: true,
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					column: {
						type: 'group',
						// type: 'meter',
						width: (this.cWidth * this.pixelRatio * 0.45) / this.opts.categories.length
					}
				}
			});
		},
		initLineChart() {
			var _this = this;
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'line',
				fontSize: 11,
				legend: true,
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: this.pixelRatio,
				categories: this.opts.categories,
				series: this.opts.series,
				animation: true,
				enableScroll: true,
				xAxis: {
					disableGrid: false,
					itemCount: 6,
					scrollShow: this.opts.series.length?this.opts.series[0].data.length > 6 ? true : false:false,
					scrollBackgroundColor: 'red',
					scrollColor: 'blue'
				},
				yAxis: {
					// gridType: 'dash',
					// gridColor: '#CCCCCC',
					// dashLength: 8,
					// splitNumber: 8,
					// // min: 10,
					// // max: 180,
					// format: (val) => {
					// 	return val.toFixed(0)
					// }
				},
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					line: {
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				}
			});
		},
		initAreaChart() {
			var _this = this;
			// console.log(123)
			//数据类型
			// Area: {
			//     categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
			//     series: [{
			//         name: '成交量A',
			//         data: [100, 80, 95, 150, 112, 132],
			//         color: '#facc14'
			//     }, {
			//         name: '成交量B',
			//         data: [70, 40, 65, 100, 44, 68],
			//         color: '#2fc25b'
			//     }, {
			//         name: '成交量C',
			//         data: [35, 20, 25, 37, 4, 20],
			//         color: '#1890ff'
			//     }]
			// }
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'area',
				fontSize: 11,
				legend: true,
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: 1,
				categories: this.opts.categories,
				series: this.opts.series,
				animation: true,
				enableScroll: true,
				xAxis: {
					disableGrid: false,
					itemCount: 6,
					scrollShow: this.opts.series.length?this.opts.series[0].data.length > 6 ? true : false:false,
					scrollBackgroundColor: 'red',
					scrollColor: 'blue'
				},
				yAxis: {
					// gridType: 'dash',
					// gridColor: '#CCCCCC',
					// dashLength: 8,
					// splitNumber: 8,
					// // min: 10,
					// // max: 180,
					// format: (val) => {
					// 	return val.toFixed(0)
					// }
				},
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
					}
				}
			});
		},
		initRadChart() {
			//数据类型
			// {
			//     categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
			//     series: [{
			//         name: '成交量1',
			//         data: [90, 110, 165, 195, 187, 172]
			//     }, {
			//         name: '成交量2',
			//         data: [190, 210, 105, 35, 27, 102]
			//     }]
			// }
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'radar',
				fontSize: 11,
				legend: true,
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: this.pixelRatio,
				categories: this.opts.categories,
				series: this.opts.series,
				animation: true,
				enableScroll: true,
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					radar: {
					       // max: 200//雷达数值的最大值
					}
				}
			});
		},
		// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
		changeData(cid, newdata) {
			canvases[cid].updateData({
				series: newdata.series,
				categories: newdata.categories
			});
		},
		touchStart(e) {
			canvases[this.canvasId].touchLegend(e, {
				animation: true
			});
			canvases[this.canvasId].showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
			canvases[this.canvasId].scrollStart(e);
		},
		touchMove(e) {
			canvases[this.canvasId].scroll(e);
		},
		touchEnd(e) {
			canvases[this.canvasId].scrollEnd(e);
		},
		error(e) {
			console.log(e);
		}
	}
};
</script>

<style scoped>
.charts {
	width: 100%;
	height: 100%;
	flex: 1;
	background-color: #ffffff;
}
</style>
